<template>
    <div class="panel panel-default">
        <!--顶部-->
        <div class="panel-heading">
            <h3 class="panel-title text-left">历史记录</h3>
        </div>
        <!--身体部分-->
        <div class="panel-body">


            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        label="日期">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{scope.row.created_time|format}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="小说"
                        prop="book.name">
                </el-table-column>
                <el-table-column
                        label="章节">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{scope.row.article.current_section_name}}</span>
                        <span style="margin-left: 10px">{{scope.row.article.title}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        align="right">

                    <template slot-scope="scope">

                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">查看
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row.id)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>


    export default {
        name: "watchHistory",
        data() {
            return {
                tableData: []
            }
        },
        created() {
            this.show_historybook_all()
        },
        methods: {
            show_historybook_all() {
                this.user_id = this.$cookies.get('user_dict').id;
                this.$axios.get(`${this.$settings.base_url}/book/historybook/`, {params: {user_id: this.user_id}}).then(response => {
                    this.tableData = response.data;
                    // console.log('this.tableData:', this.tableData);
                })
            },
            handleEdit(index, row) {
                let book_id = row.book.id;
                let current_section = row.article.current_section;
                this.$router.push(`/content/${book_id}/${current_section}`);
                // console.log("index, row:", index, row);
            },
            handleDelete(index, row) {
                this.$axios.delete(`${this.$settings.base_url}/book/historybookdel/`, {params: {history_id: row}}).then(responce => {
                    this.show_historybook_all()
                });

            },
        }
    }
</script>

<style scoped>

</style>